---
import Layout from '../../layouts/Layout.astro';
import src from '../_og.jpg?url';
import BadgePicker, { type Badge } from '../../components/BadgePicker.astro';
import Frame from '../../components/Frame.astro';

const title = 'Badges';
const description =
  'SVG badges to add to your sites and GitHub READMEs and show off your PaddlePaddle pride!';
---

<Layout
  {title}
  {description}
  ogImg={{ src, alt: 'Share your PaddlePaddle pride with a “Built with PaddlePaddle badge.' }}
>
  <div class="mx-auto flex flex-col gap-10">
    <div class="flex flex-col gap-4">
      <h1 class="heading-3 text-white">Built with…</h1>
      <p>Add a badge to your repository or website and show off your PaddlePaddle pride!</p>
    </div>

    <hr class="border-neutral-500" />

    <div class="flex flex-col gap-6">
      <h2 class="heading-4 text-white">PaddlePaddle</h2>
      <Frame>
        <BadgePicker
          aspectRatio={6}
          alt="Built with PaddlePaddle"
          link="http://paddlepaddle.org"
          getImagePath={({ slug }: Badge) => `v1/built-with-paddlepaddle/${slug}.svg`}
        />
      </Frame>
    </div>
  </div>
</Layout>
